<template>
  <div class="language-list flex justify-between text-gray-400">
    <el-scrollbar class="py-1">
      <div class="flex justify-start flex-shrink-0" style="white-space: nowrap">
        <div
          class="ml-1 px-5 py-1 cursor-pointer"
          :class="{ activeClass: active === item.language_id }"
          v-for="(item, index) in languageList"
          :key="index"
          @click="changeLanguage(item.language_id)"
        >
          {{ item.label }}
        </div>
      </div>
    </el-scrollbar>

    <div class="flex justify-start w-60 py-1 shadow-right">
      <el-button type="primary" link @click="clickTranslation" :disabled="disabled"
        >一键翻译</el-button
      >
      <el-select
        v-model="languages"
        collapse-tags
        placeholder="请选择"
        clearable
        multiple
        class="!w-[160px] ml-2"
        @change="changeLang"
        :disabled="disabled"
      >
        <el-option
          v-for="item in languageOption.filter(
            (item) => !(item.language_id === 1 || item.language_id === 2)
          )"
          :key="item.language_id"
          :label="item.language"
          :value="item.language_id"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup name="Describe">
import { computed, onMounted } from "vue";
import useCommonStore from "@/store/modules/common";
import { storeToRefs } from "pinia";
const commonStore = useCommonStore();
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const languageOption = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const languageOptions = computed(() => {
  if (!commonStore.languageOptions) {
    commonStore.getLanguageList();
  }
  return commonStore.languageOptions || [];
});

const emit = defineEmits(["languageList", "activeLang", "translation"]);
const active = ref(1);
const languages = ref("");
let languageList = ref([]);
const languagArr = reactive([
  {
    label: "中文",
    language_id: 1,
    short_name: "zh-chs",
  },
  {
    label: "英语",
    language_id: 2,
    short_name: "en",
  },
]);
onMounted(() => {
  setTimeout(() => {
    languages.value = languageOption.value
      .filter((item) => !(item.language_id === 1 || item.language_id === 2) && item.show)
      .map((i) => i.language_id);
    languageList.value = languagArr;

    changeLang();
  }, 200);
});

const changeLang = () => {
  let arr = [];

  languages.value.forEach((lang) => {
    if (languageOptions.value.length) {
      languageOptions.value.forEach((o) => {
        if (lang === o.id && !(o.language_id == 1 || o.language_id == 2)) {
          arr.push({
            label: o.name,
            language_id: o.id,
            short_name: o.short_name,
          });
        }
      });
    }
  });

  console.log("languages.value");
  console.log(languages.value);

  languageList.value = [...languagArr, ...arr];
  console.log("languageList.value");
  console.log(languageList.value);
  emit("languageList", languageList.value, active.value);
};
const changeLanguage = (value) => {
  active.value = value;
  emit("activeLang", active.value);
};
const clickTranslation = () => {
  emit("translation");
};
</script>

<style lang="scss" scoped>
.language-list {
  border-bottom: 1px solid #e6e7e9;
  background: var(--base-small-bg-color);
}
.activeClass {
  background: #eaf3ff;
  // border-radius: 4px;
  color: #3487ff;
}
.shadow-right {
  padding: 0 6px;
}
</style>
